<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .app {
      width: 100vw;
      background-color: pink;
      height: 100vh;
      /* 用于控制块级容器内部的行内内容的对齐方式，但它本身不会使行内元素在其父容器中居中。 */
      /* 这个属性的作用对象，是块级元素 */
      text-align: center;
      position: relative;
    }

    .box {
      width: 200px;
      height: 200px;
      background-color: red;
      margin: auto;
    }
    .item {
      width: 300px;
      height: 100px;
      position: absolute;
      left: 50%;
      margin-left: -150px;
      background-color: green;
    }
    .ddd {
      width: 300px;
      height: 300px;
      background-color: #fff;
    }
    .ppp {
      width: 300px;
      height: 100px;
      position: absolute;
      left: 50%; /* 向右移动50%的父容器宽度 */
      transform: translateX(-50%); /* 向左移动自身宽度的50% */
      background-color: orange;

    }
    .container {
      width: 100vw;
      height: 400px;
      display: flex;
      background-color: gray;
      justify-content: center;
    }
    .content {
      background-color: lightcoral;

    }
  </style>
  <body>
    <div class="app">
      <!-- inline元素的水平居中，使用text-align即可 -->
      <span>行级元素水平居中对齐</span>
      <!-- block元素 使用margin auto即可 -->
      <div class="box">块级元素的水平居中对齐</div>
      <!-- 绝对定位元素可结合left和margin实现，但是必须知道宽度 -->
      <div class="item">绝对定位元素水平居中对齐</div>
      <div class="ddd">我是占位元素，不实现水平居中</div>
      <!-- 绝对定位元素可结合left和transform实现，不需要知道ppp的宽度 -->
      <div class="ppp">绝对定位元素水平居中对齐的另一种写法</div>
      <div class="ddd">我是占位元素，不实现水平居中</div>
    </div>
    <!--使用flex布局实现水平居中 -->
    <div class="container">
      <div class="content">使用flex布局实现水平居中</div>
    </div>
  </body>
</html>
